<!--
 * @Author: guandeshen 295570679@qq.com
 * @Date: 2024-08-25 13:39:52
 * @LastEditors: 关德参 2257609862@qq.com
 * @LastEditTime: 2024-09-15 16:02:41
 * @FilePath: /task-admin/src/views/project/components/ProjectBudget/index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by RSC, All Rights Reserved. 
-->
<template>
  <div class="content">
    <ul class="flex mb-24px">
      <li
        class="flex w-[33.33%] pt-16px"
        v-for="(item, index) in list"
        :key="index"
      >
        <div
          class="flex-center w-44px h-44px border-rd-8px shrink-0 mr-16px"
          :class="item.bgColor"
        >
          <svg-icon class="w-21px h-21px" :icon-class="item.icon" />
        </div>
        <div class="flex flex-col flex-1">
          <span class="text-[#969799] text-16px font-900 lh-24px">{{
            item.name
          }}</span>
          <strong class="lh-46px mt-8px text-32px font-900 text-[#323233]">{{
            item.value
          }}</strong>
        </div>
      </li>
    </ul>
    <div class="table-box">
      <el-table
        :data="budgetInfo?.list"
        :stripe="true"
        :header-cell-style="{
          'background-color': '#F6F7F9',
          color: '#8B8B99',
        }"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.relatedWBS')"
          :show-overflow-tooltip="true"
          :min-width="130"
        >
          <template #default="scope">
            <span>{{ scope.row.wbs_name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.budgetAmount')"
          align="right"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span>{{ scope.row.wbs_estimated_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.actualAmount')"
          align="right"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span>{{ scope.row.wbs_actual_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.startDate')"
          :show-overflow-tooltip="true"
          :min-width="120"
        >
          <template #default="scope">
            <span>{{ scope.row.start_d }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.endDate')"
          :show-overflow-tooltip="true"
          :min-width="120"
        >
          <template #default="scope">
            <span>{{ scope.row.end_d }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.relatedTasks')"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span>{{
              scope.row.task_list.map((item: any) => item.task_name).join(",")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          :label="$t('common.availableBudget')"
          align="right"
          :show-overflow-tooltip="true"
          :min-width="140"
        >
          <template #default="scope">
            <span
              :class="
                scope.row.wbs_estimated_amount - scope.row.wbs_actual_amount > 0
                  ? 'text-[#4E6BEF]'
                  : 'text-[#EF4E4E]'
              "
              >{{
                scope.row.wbs_estimated_amount - scope.row.wbs_actual_amount
              }}</span
            >
          </template>
        </el-table-column>

        <!-- <el-table-column
          fixed="right"
          :label="$t('common.operation')"
          :min-width="120"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="view"
              link
              @click="handleViewClick(row)"
            >
              {{ $t("common.viewWBS") }}
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { IObject } from "@/hooks/usePage";
import { BudgetInfo } from "@/api/project/model";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    budgetInfo?: BudgetInfo;
  }>(),
  {
    budgetInfo: () => ({
      estimated_amount: 0,
      actual_amount: 0,
      remaining_amount: 0,
    }),
  }
);
// watchEffect

// const props = defineProps<{
//   budgetInfo?: BudgetInfo;
// }>();

// const budgetInfo = computed(() => props.budgetInfo || {});
const list = ref<IObject[]>([
  {
    name: t("common.projectBudget"),
    icon: "BudgetListSelect",
    bgColor: "bg-[#F0F5FF]",
    value: props.budgetInfo?.estimated_amount || 0,
  },
  {
    name: t("common.costAlreadyIncurred"),
    icon: "costAlreadyIncurred",
    bgColor: "bg-[#FFF0F0]",
    value: props.budgetInfo?.actual_amount || 0,
  },
  {
    name: t("common.remainingBudget"),
    icon: "remainingBudget",
    bgColor: "bg-[#EDFFE7]",
    value: props.budgetInfo?.remaining_amount || 0,
  },
]);
watchEffect(() => {
  list.value[0].value = props.budgetInfo?.estimated_amount || 0;
  list.value[1].value = props.budgetInfo?.actual_amount || 0;
  list.value[2].value = props.budgetInfo?.remaining_amount || 0;
});
</script>

<style scoped>
:deep(.table-box) {
  margin-top: 0 !important;
  padding: 0 !important;
}
</style>
